<template>
  <ag-popup v-model="visible" title="测量" @onCancel="onCancel" class="infoBox">
    <div class="content">
      <div class="msg">{{ guide }}</div>
      <div class="item">
        <label class="trlable">深度检测</label>
        <el-switch
          class="switch"
          @change="onDepthTestChange"
          v-model="isDepthTest"
        />
      </div>
      <div class="item">
        <label class="trlable">自动捕捉节点</label>
        <el-switch
          class="switch"
          @change="onAutoCatchNode"
          v-model="autoCatchNode"
        />
      </div>
      <el-tabs v-model="activeName" @tab-click="onChangeTab" type="card">
        <el-tab-pane name="1" label="距离">
          <dl>
            <dt style="color: #f99d0d" class="result-msg">
              直线距离：{{ straightDistance }}m
            </dt>
            <dt style="color: #d52c40" class="result-msg">
              水平距离：{{ HorizontalDistance }}m
            </dt>
            <dt style="color: #7ccf21" class="result-msg">
              垂直距离：{{ verticalDistance }}m
            </dt>
          </dl>
        </el-tab-pane>
        <el-tab-pane name="2" label="面积">
          <dl>
            <dt style="color: #f99d0d">面积：{{ area }}</dt>
            <dt style="color: #d52c40">周长：{{ lengths }}</dt>
          </dl>
        </el-tab-pane>
        <el-tab-pane name="3" label="角度">
          <dl>
            <dt style="color: #f99d0d">角度：{{ angle }}°</dt>
          </dl>
        </el-tab-pane>
        <el-tab-pane name="4" label="标高">
          <dl>
            <dt style="color: #f99d0d" class="result-msg">
              标高：{{ height }}m
            </dt>
          </dl>
        </el-tab-pane>
        <!-- <el-tab-pane name="5" label="最小距离"
          ><dl>
            <dt style="color:#f99d0d">最小距离：{{ minDistance }}m</dt>
          </dl></el-tab-pane
        > -->
        <el-tab-pane name="6" label="坐标拾取">
          <dl style="float: left">
            <dt style="color: #f99d0d" class="result-msg">经纬度：</dt>
            <dt style="color: #f99d0d" class="result-msg">经度：{{ long }}</dt>
            <dt style="color: #f99d0d" class="result-msg">纬度：{{ lat }}</dt>
            <dt style="color: #f99d0d" class="result-msg">高程：{{ elev }}</dt>
          </dl>
          <dl style="margin-left: 50%; position: absolute">
            <dt style="color: #f99d0d; font-weight: normal" class="result-msg">
              世界坐标：
            </dt>
            <dt style="color: #f99d0d" class="result-msg">x：{{ x }}</dt>
            <dt style="color: #f99d0d" class="result-msg">y：{{ y }}</dt>
            <dt style="color: #f99d0d" class="result-msg">z：{{ z }}</dt>
          </dl>
        </el-tab-pane>
      </el-tabs>
      <div style="text-align: center">
        <el-button
          size="small"
          style="width: 100px"
          type="primary"
          block
          @click="onNew"
          v-show="activeName !=4 && activeName !=6"
          >新测量</el-button
        >
      </div>
    </div>
  </ag-popup>
</template>
<script>
import AgPopup from "@/views/components/precut/AgPopup.vue";
import DistanceMeasure from "./js/distanceMeasure";
import AreaMeasure from "./js/areaMeasure";
import AngleMeasure from "./js/angleMeasure";
import HeightMeasure from "./js/heightMeasure";
import CoordinatePick from "./js/coordinatePick";
import MinDistanceMeasure from "./js/minDistanceMeasure";

let currentMeasureType = "1";
let firstRequestRenderMode = false;

export default {
  components: { "ag-popup": AgPopup },
  data() {
    return {
      activeName: "1",
      visible: true,
      straightDistance: "--",
      HorizontalDistance: "--",
      verticalDistance: "--",
      area: "--",
      lengths: "--",
      angle: "--",
      height: "--",
      minDistance: "--",
      long: "--",
      lat: "--",
      elev: "--",
      x: "--",
      y: "--",
      z: "--",
      guide: "通过单击场景选择两点进行测量",
      isDepthTest: false,
      globe_isDepthTest: "",
      autoCatchNode: true,
    };
  },
  mounted() {
    DistanceMeasure.initialize(CIM.viewer, this);
    currentMeasureType = "1";
    this.globe_isDepthTest = CIM.viewer.scene.globe.depthTestAgainstTerrain;
    CIM.viewer.scene.globe.depthTestAgainstTerrain = true;
    this.isDepthTest = CIM.viewer.scene.globe.depthTestAgainstTerrain;
    firstRequestRenderMode = CIM.viewer.scene.requestRenderMode;
    CIM.viewer.scene.requestRenderMode = false;
  },
  methods: {
    onChangeTab(tab) {
      let e = tab.name;
      this.clearMeasureResult();
      this.closeMeasure(currentMeasureType);
      this.openMeasure(e, this);
      currentMeasureType = e;
    },
    onNew() {
      this.clearMeasureResult();
      this.closeMeasure(currentMeasureType);
      this.openMeasure(currentMeasureType, this);
    },
    onCancel() {
      this.visible = false;
      this.closeMeasure(currentMeasureType);
      this.$emit("close", { code: "MeasuringTool" });
    },
    openMeasure(type, vm) {
      switch (type) {
        case "1":
          this.guide = "通过单击场景选择两点测量距离";
          DistanceMeasure.initialize(CIM.viewer, vm, this.autoCatchNode);
          break;
        case "2":
          this.guide = "通过单击场景选择至少三点测量面积、周长，双击结束";
          AreaMeasure.initialize(CIM.viewer, vm, this.autoCatchNode);
          break;
        case "3":
          this.guide = "通过单击场景选择三点测量角度";
          AngleMeasure.initialize(CIM.viewer, vm, this.autoCatchNode);
          break;
        case "4":
          this.guide = "通过单击场景选择一点测量标高";
          HeightMeasure.initialize(CIM.viewer, vm);
          break;
        case "5":
          this.guide = "通过单击场景中两个构件测量最小距离";
          MinDistanceMeasure.initialize(CIM.viewer, vm);
          break;
        case "6":
          this.guide = "通过单击场景选择一点拾取坐标";
          CoordinatePick.pickAndDrawPoint(CIM.viewer,vm);
          // .then((values) => {
          //   this.long = values.long;
          //   this.lat = values.lat;
          //   this.elev = values.elev;
          //   this.x = values.x;
          //   this.y = values.y;
          //   this.z = values.z;
          // });
          break;
      }
    },
    closeMeasure(type) {
      switch (type) {
        case "1":
          DistanceMeasure.dispose();
          break;
        case "2":
          AreaMeasure.dispose();
          break;
        case "3":
          AngleMeasure.dispose();
          break;
        case "4":
          HeightMeasure.dispose();
          break;
        case "5":
          MinDistanceMeasure.dispose();
          break;
        case "6":
          CoordinatePick.dispose();
          break;
      }
    },
    clearMeasureResult() {
      this.straightDistance = "--";
      this.HorizontalDistance = "--";
      this.verticalDistance = "--";
      this.area = "--";
      this.lengths = "--";
      this.angle = "--";
      this.height = "--";
      this.minDistance = "--";
      this.long = "--";
      this.lat = "--";
      this.elev = "--";
      this.x = "--";
      this.y = "--";
      this.z = "--";
    },
    onDepthTestChange(e) {
      this.isDepthTest = e;
      CIM.viewer.scene.globe.depthTestAgainstTerrain = this.isDepthTest;
    },
    onAutoCatchNode(e) {
      this.autoCatchNode = e;
    },
  },
  destroyed() {
    this.closeMeasure(currentMeasureType);
    //TODO:需要解释
    setTimeout(() => {
      CIM.viewer.scene.requestRenderMode = firstRequestRenderMode;
    }, 10);
    CIM.viewer.scene.globe.depthTestAgainstTerrain = this.globe_isDepthTest;
  },
};
</script>
<style scoped>
.infoBox {
  position: absolute;
  width: 400px;
}
.infoBox .content {
  padding: 20px;
  line-height: 1.5;
}
.infoBox .msg {
  margin-bottom: 20px;
  color: #fff;
}

.unit-box {
  width: 120px;
}

.result-msg {
  margin: 10px 0 0 10px;
}
.item {
  margin-bottom: 10px;
  color: #fff;
}
.switch {
  left: 15px;
}
.content ::v-deep .el-tabs--card>.el-tabs__header .el-tabs__nav{
  border: none;
}
.content ::v-deep .el-tabs__item{
  color: #fff;
  padding: 0 16px;
}
.content ::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item{
  border: none;
}
.content ::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
  color: #1890ff;
  background: #fff;
  border-color: #e8e8e8;
  border-bottom: 1px solid #fff;
  border-radius: 4px 4px 0 0;
}
</style>
